{% extends "admin/base_site_grid.html" %}
{% load i18n %}
{% load static %}

{% block extrahead %}{{block.super}}
<script src="{{STATIC_URL}}js/angular.min.js"></script>
<script src="{{STATIC_URL}}js/angular-cookies.min.js"></script>
<script src="{{STATIC_URL}}js/angular-gettext.min.js"></script>
<script src="{{STATIC_URL}}js/angular-websocket.js"></script>
<script src="{{STATIC_URL}}js/i18n/angular-freppletranslations.js"></script>

{% if debug_js %}
<script src="{{STATIC_URL}}common/src/module.js"></script>
<script src="{{STATIC_URL}}common/src/preferences.js"></script>
<script src="{{STATIC_URL}}common/src/webfactory.js"></script>

<script src="{{STATIC_URL}}input/src/module.js"></script>
<script src="{{STATIC_URL}}input/src/customer.js"></script>
<script src="{{STATIC_URL}}input/src/demand.js"></script>
<script src="{{STATIC_URL}}input/src/location.js"></script>
<script src="{{STATIC_URL}}input/src/buffer.js"></script>
<script src="{{STATIC_URL}}input/src/resource.js"></script>
<script src="{{STATIC_URL}}input/src/item.js"></script>
<script src="{{STATIC_URL}}input/src/operation.js"></script>
<script src="{{STATIC_URL}}input/src/operationplan.js"></script>
<script src="{{STATIC_URL}}input/src/model.js"></script>

<script src="{{STATIC_URL}}operationplandetail/src/module.js"></script>
<script src="{{STATIC_URL}}operationplandetail/src/operationplandetailCtrl.js"></script>
<script src="{{STATIC_URL}}operationplandetail/src/problemspanelDrv.js"></script>
<script src="{{STATIC_URL}}operationplandetail/src/resourcespanelDrv.js"></script>
<script src="{{STATIC_URL}}operationplandetail/src/bufferspanelDrv.js"></script>
<script src="{{STATIC_URL}}operationplandetail/src/demandpeggingpanelDrv.js"></script>
<script src="{{STATIC_URL}}operationplandetail/src/operationplanpanelDrv.js"></script>
<script src="{{STATIC_URL}}operationplandetail/src/networkstatusDrv.js"></script>
<script src="{{STATIC_URL}}operationplandetail/src/downstreamoperationplansDrv.js"></script>
<script src="{{STATIC_URL}}operationplandetail/src/upstreamoperationplansDrv.js"></script>
<script src="{{STATIC_URL}}operationplandetail/src/supplyinformationDrv.js"></script>
{% else %}
<script src="{{STATIC_URL}}js/frepple-common.min.js"></script>
<script src="{{STATIC_URL}}js/frepple-input.min.js"></script>
<script src="{{STATIC_URL}}js/frepple-operationplandetail.min.js"></script>
{% endif %}

<script>

  function extraPreference() {
    return {
      "height": Math.floor($("#gbox_grid").height() - 48),
      "width": Math.floor($("#fields").width())
    };
  }

  var language="{{LANGUAGE_CODE}}";
  var version='{% version_short %}';
  var lastid = '';

  $(function() {
    $("#workarea").css('overflow-x','visible');
    var resizeoptions={
      handleSelector: "#resize-handle",
      resizeWidth: false,
      resizeHeight: true,
      onDrag: function (e, $el, opt) {$("#grid").setGridHeight($('#content-main').height()-52);}
    }
    $("#resize-handle").css({'display':'inline-block'});
    $("#content-main").resizable({
      handleSelector: "#resize-handle",
      resizeWidth: false,
      resizeHeight: true,
      onDrag: function (e, $el, opt) {
        $('#grid').setGridWidth($('#content-main').width());
        $("#grid").setGridHeight($('#content-main').height()-52);
      },
      onDragEnd: function (e, $el, opt) {
        grid.saveColumnConfiguration();
      }
    });
    $("#save").on('click', function() {angular.element('#controller').scope().displayInfo(undefined);});
    $("#undo").on('click', function() {angular.element('#controller').scope().displayInfo(undefined);});
    $("#actionsul li").on('click', function() {angular.element('#controller').scope().refreshstatus($("#actions").val());});
  });
</script>
{% endblock %}

{% block extracontainer %}data-ng-app="operationplandetailapp"{% endblock %}

{% block tools %}{% if args %}{% tabs model %}{% endif %}{% endblock %}

{% block extra_grid %}

onSelectAll: function(aRowids,status){
  var selection = $(this).jqGrid('getGridParam','selarrrow');
  var selectiondata = [];
  jQuery.each(selection , function(index,item) {
    selectiondata.push(jQuery("#grid").getRowData(item));
  });
  if (status === true)
    angular.element('#controller').scope().processAggregatedInfo(selectiondata, jQuery("#grid").jqGrid ('getGridParam', 'colModel'));
  else
    angular.element('#controller').scope().displayInfo(undefined);
},
beforeSaveCell: function(rowid, cellname, value, iRow, iCol) {
  var selection = $(this).jqGrid('getGridParam','selarrrow');
  var selectiondata = [];
  var rowdata = {};
  var temprow = jQuery("#grid").getRowData(rowid);

  jQuery.each(selection , function(index,item){
    if (item === rowid) {
      //update temprow
      temprow[cellname] = value;

      selectiondata.push(temprow);
    } else {
      rowdata = jQuery("#grid").getRowData(item);

      //if is being edited
      if (typeof $("#" + item +" input").attr('cm','[Object Object]').not('.cbox').val() !== 'undefined') {
        if ($("#" + item).hasClass('success')) {
          if (typeof $("#" + item +" input").attr('cm','[Object Object]').not('.cbox').attr("id") !== 'undefined') {
            colname=$("#" + item +" input").attr('cm','[Object Object]').not('.cbox').attr("id").split("_")[1];
            if (typeof colname !== 'undefined') {
              rowdata[colname] = $("#" + item +" input").attr('cm','[Object Object]').not('.cbox').val();
            }
          }
        }
      }
      selectiondata.push(rowdata);
    }
  });

  if (selection.length > 1)
    angular.element('#controller').scope().processAggregatedInfo(selectiondata, jQuery("#grid").jqGrid ('getGridParam', 'colModel'));
  else
    angular.element('#controller').scope().displayonpanel(rowid, cellname, value);
},
onSelectRow: function(rowid, status, e) {
  var selection = [];
  if ($(this).jqGrid('getGridParam').multiselect === true) {
    selection = $(this).jqGrid('getGridParam','selarrrow').slice();
  } else {
    selection = [$(this).jqGrid('getGridParam','selrow').slice()];
  }
  grid.markSelectedRow(selection.length);

  var selectiondata = [];
  var rowdata={};
  var colname = "";
  var editedval = "";
  jQuery.each(selection , function(index,item) {
    rowdata = jQuery("#grid").getRowData(item);
    var elem = $("#" + item +" input");
    editedval = elem.attr('cm','[Object Object]').not('.cbox').val();
    if ( typeof elem.attr('cm','[Object Object]').not('.cbox').val() !== 'undefined' ) {
      if (typeof elem.attr('cm','[Object Object]').not('.cbox').attr("id") !== 'undefined') {
        colname=elem.attr('cm','[Object Object]').not('.cbox').attr("id").split("_")[1];
        if (typeof colname !== 'undefined') {
          rowdata[colname] = elem.attr('cm','[Object Object]').not('.cbox').val();
        }
      }
    }
    selectiondata.push(rowdata);
  });

  if (selectiondata.length > 1) {
    angular.element('#controller').scope().processAggregatedInfo(selectiondata, jQuery("#grid").jqGrid ('getGridParam', 'colModel'));
  } else if (selectiondata.length === 1) {
    angular.element('#controller').scope().displayInfo(selectiondata[0]);
  } else {
    angular.element('#controller').scope().displayInfo(undefined);
  }
},
multiboxonly: true,	
{% endblock %}

{% block after_table %}
<div class="row">
  <div class="col-md-12">
    <table id="gridANG" class="table table-striped" style="background-color: white"></table>
    <div id="gridpagerANG"></div>
  </div>
</div>
<div data-ng-include="'/static/operationplandetail/operationplandetail.html'"></div>
<script>
//frepple.js will call this function to alert angular that the grid has changed
function checkrows(grid, selection) {
  var selectiondata = [];
  jQuery.each(selection , function(index,item){
    selectiondata.push(grid.getRowData(item));
  });
  if (selectiondata.length > 1) {
    angular.element('#controller').scope().processAggregatedInfo(selectiondata, jQuery("#grid").jqGrid ('getGridParam', 'colModel'));
  } else if (selectiondata.length === 1) {
    angular.element('#controller').scope().displayInfo(selectiondata[0]);
  } else {
    angular.element('#controller').scope().displayInfo(undefined);
  }
}
//controller will call this function to pass values to the grid
function displayongrid(id, columnid, value) {
  angular.element(document).find("#" + id).removeClass("edited").addClass("edited");
  if (columnid === "startdate") {
    angular.element(document).find("#grid").jqGrid("setCell", id, "startdate", value, "dirty-cell");
    $("#save").removeClass("btn-primary btn-danger").addClass("btn-danger").prop("disabled", false);
    $("#undo").removeClass("btn-primary btn-danger").addClass("btn-danger").prop("disabled", false);
  }
  if (columnid === "enddate") {
    jQuery("#grid").jqGrid("setCell", id, "enddate", value, "dirty-cell");
    $("#save").removeClass("btn-primary btn-danger").addClass("btn-danger").prop("disabled", false);
    $("#undo").removeClass("btn-primary btn-danger").addClass("btn-danger").prop("disabled", false);
  }
  if (columnid === "quantity") {
    jQuery("#grid").jqGrid("setCell", id, "quantity", value, "dirty-cell");
    $("#save").removeClass("btn-primary btn-danger").addClass("btn-danger").prop("disabled", false);
    $("#undo").removeClass("btn-primary btn-danger").addClass("btn-danger").prop("disabled", false);
  }
  if (columnid === "status") {
    if (['proposed', 'approved', 'confirmed', 'completed', 'closed'].indexOf(value) > -1) {
      jQuery("#grid").jqGrid("setCell", id, "status", value, "dirty-cell");
      $("#save").removeClass("btn-primary btn-danger").addClass("btn-danger").prop("disabled", false);
      $("#undo").removeClass("btn-primary btn-danger").addClass("btn-danger").prop("disabled", false);
    }
  }
}
</script>
{% endblock %}
